import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Icon } from '/@/components/Icon';
import { duplicateCheck } from '../user/user.api';
import { ajaxGetDictItems, checkPermDuplication } from './menu.api';
import { render } from '/@/utils/common/renderUtils';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n('system.menu');
const { t: fields } = useI18n('system.menu.fields');
const { t: common } = useI18n('common');
const menuFields = {
  name: fields('name'),
  menuType: fields('menuType'),
  parentId: fields('parentId'),
  component: fields('component'),
  url: fields('url'),
  componentName: fields('componentName'),
  frameSrc: fields('frameSrc'),
  redirect: fields('redirect'),
  perms: fields('perms'),
  permsType: fields('permsType'),
  status: fields('status'),
  icon: fields('icon'),
  sortNo: fields('sortNo'),
  route: fields('route'),
  hidden: fields('hidden'),
  hideTab: fields('hideTab'),
  keepAlive: fields('keepAlive'),
  alwaysShow: fields('alwaysShow'),
  internalOrExternal: fields('internalOrExternal'),
  ruleName: fields('ruleName'),
  ruleColumn: fields('ruleColumn'),
  ruleValue: fields('ruleValue'),
  ruleConditions: fields('ruleConditions'),
};

const isDir = (type) => type === 0;
const isMenu = (type) => type === 1;
const isButton = (type) => type === 2;

// 定义可选择的组件类型
export enum ComponentTypes {
  Default = 'layouts/default/index',
  IFrame = 'sys/iframe/FrameBlank',
}

export const columns: BasicColumn[] = [
  {
    title: menuFields.name,
    dataIndex: 'name',
    width: 200,
    align: 'left',
  },
  {
    title: menuFields.menuType,
    dataIndex: 'menuType',
    width: 150,
    customRender: ({ text }) => {
      return render.renderDict(text, 'menu_type');
    },
  },
  {
    title: menuFields.icon,
    dataIndex: 'icon',
    width: 50,
    customRender: ({ record }: { record: any }) => {
      return h(Icon, { icon: record.icon });
    },
  },
  {
    title: menuFields.component,
    dataIndex: 'component',
    align: 'left',
    width: 150,
  },
  {
    title: menuFields.url,
    dataIndex: 'url',
    align: 'left',
    width: 150,
  },
  {
    title: menuFields.sortNo,
    dataIndex: 'sortNo',
    width: 50,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: menuFields.name,
    component: 'Input',
    colProps: { span: 8 },
  },
];

export const formSchema: FormSchema[] = [
  {
    label: 'id',
    field: 'id',
    component: 'Input',
    show: false,
  },
  {
    field: 'menuType',
    label: menuFields.menuType,
    component: 'RadioButtonGroup',
    defaultValue: 0,
    componentProps: ({ formActionType, formModel }) => {
      return {
        options: [
          { label: t('menuType1'), value: 0 },
          { label: t('menuType2'), value: 1 },
          { label: t('menuType3'), value: 2 },
        ],
        onChange: (e) => {
          const { updateSchema, clearValidate } = formActionType;
          const label = isButton(e) ? t('menuType3') : menuFields.name;
          //清除校验
          clearValidate();
          updateSchema([
            {
              field: 'name',
              label: label,
            },
            {
              field: 'url',
              required: !isButton(e),
            },
          ]);
          //update-begin---author:wangshuai ---date:20220729  for：[VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空------------
          if (isMenu(e) && !formModel.id && formModel.component == 'layouts/RouteView') {
            formModel.component = '';
          }
          //update-end---author:wangshuai ---date:20220729  for：[VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空------------
        },
      };
    },
  },
  {
    field: 'name',
    label: menuFields.name,
    component: 'Input',
    required: true,
  },
  {
    field: 'parentId',
    label: menuFields.parentId,
    component: 'TreeSelect',
    required: true,
    componentProps: {
      replaceFields: {
        title: 'name',
        key: 'id',
        value: 'id',
      },
      dropdownStyle: {
        maxHeight: '50vh',
      },
      getPopupContainer: (node) => node.parentNode,
    },
    ifShow: ({ values }) => !isDir(values.menuType),
  },
  {
    field: 'url',
    label: menuFields.url,
    component: 'Input',
    required: true,
    ifShow: ({ values }) => !(values.component === ComponentTypes.IFrame && values.internalOrExternal) && values.menuType !== 2,
    //update-begin-author:zyf date:2022-11-02 for: 聚合路由允许路径重复
    dynamicRules: ({ model, schema }) => {
      return checkPermDuplication(model, schema, true);
    },
    //update-end-author:zyf date:2022-11-02 for: 聚合路由允许路径重复
  },
  {
    field: 'component',
    label: menuFields.component,
    component: 'Input',

    defaultValue: 'layouts/RouteView',
    required: true,
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'componentName',
    label: menuFields.componentName,
    component: 'Input',
    helpMessage: [t('componentNameTip1'), t('componentNameTip2'), t('componentNameTip3'), t('componentNameTip4')],
    defaultValue: '',
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'frameSrc',
    label: menuFields.frameSrc,
    component: 'Input',
    rules: [
      { required: true, message: t('frameSrcRule1') },
      { type: 'url', message: t('frameSrcRule2') },
    ],
    ifShow: ({ values }) => !isButton(values.menuType) && values.component === ComponentTypes.IFrame,
  },
  {
    field: 'redirect',
    label: menuFields.redirect,
    component: 'Input',
    ifShow: ({ values }) => isDir(values.menuType),
  },
  {
    field: 'perms',
    label: menuFields.perms,
    component: 'Input',
    ifShow: ({ values }) => isButton(values.menuType),
  },
  {
    field: 'permsType',
    label: menuFields.permsType,
    component: 'RadioGroup',
    defaultValue: '1',
    helpMessage: [t('permsTypeTip1'), t('permsTypeTip2')],
    componentProps: {
      options: [
        { label: t('permsType1'), value: '1' },
        { label: t('permsType2'), value: '2' },
      ],
    },
    ifShow: ({ values }) => isButton(values.menuType),
  },
  {
    field: 'status',
    label: menuFields.status,
    component: 'RadioGroup',
    defaultValue: '1',
    componentProps: {
      options: [
        { label: common('valid'), value: '1' },
        { label: common('invalid'), value: '0' },
      ],
    },
    ifShow: ({ values }) => isButton(values.menuType),
  },
  {
    field: 'icon',
    label: menuFields.icon,
    component: 'IconPicker',
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'sortNo',
    label: menuFields.sortNo,
    component: 'InputNumber',
    defaultValue: 1,
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'route',
    label: menuFields.route,
    component: 'Switch',
    defaultValue: true,
    componentProps: {
      checkedChildren: common('yes'),
      unCheckedChildren: common('no'),
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'hidden',
    label: menuFields.hidden,
    component: 'Switch',
    defaultValue: 0,
    componentProps: {
      checkedChildren: common('yes'),
      unCheckedChildren: common('no'),
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'hideTab',
    label: menuFields.hideTab,
    component: 'Switch',
    defaultValue: 0,
    componentProps: {
      checkedChildren: common('yes'),
      unCheckedChildren: common('no'),
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'keepAlive',
    label: menuFields.keepAlive,
    component: 'Switch',
    defaultValue: false,
    componentProps: {
      checkedChildren: common('yes'),
      unCheckedChildren: common('no'),
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'alwaysShow',
    label: menuFields.alwaysShow,
    component: 'Switch',
    defaultValue: false,
    componentProps: {
      checkedChildren: common('yes'),
      unCheckedChildren: common('no'),
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'internalOrExternal',
    label: menuFields.internalOrExternal,
    component: 'Switch',
    defaultValue: false,
    componentProps: {
      checkedChildren: common('external'),
      unCheckedChildren: common('interior'),
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
];

export const dataRuleColumns: BasicColumn[] = [
  {
    title: menuFields.ruleName,
    dataIndex: 'ruleName',
    width: 150,
  },
  {
    title: menuFields.ruleColumn,
    dataIndex: 'ruleColumn',
    width: 100,
  },
  {
    title: menuFields.ruleValue,
    dataIndex: 'ruleValue',
    width: 100,
  },
];

export const dataRuleSearchFormSchema: FormSchema[] = [
  {
    field: 'ruleName',
    label: menuFields.ruleName,
    component: 'Input',
    colProps: { span: 12 },
  },
  {
    field: 'ruleValue',
    label: menuFields.ruleValue,
    component: 'Input',
    colProps: { span: 13 },
  },
];

export const dataRuleFormSchema: FormSchema[] = [
  {
    label: 'id',
    field: 'id',
    component: 'Input',
    show: false,
  },
  {
    field: 'ruleName',
    label: menuFields.ruleName,
    component: 'Input',
    required: true,
  },
  {
    field: 'ruleColumn',
    label: menuFields.ruleColumn,
    component: 'Input',
    ifShow: ({ values }) => {
      return values.ruleConditions !== 'USE_SQL_RULES';
    },
  },
  {
    field: 'ruleConditions',
    label: menuFields.ruleConditions,
    required: true,
    component: 'ApiSelect',
    componentProps: {
      api: ajaxGetDictItems,
      params: { code: 'rule_conditions' },
      labelField: 'text',
      valueField: 'value',
      getPopupContainer: (node) => document.body,
    },
  },
  {
    field: 'ruleValue',
    label: menuFields.ruleValue,
    component: 'Input',
    required: true,
  },
  {
    field: 'status',
    label: menuFields.status,
    component: 'RadioButtonGroup',
    defaultValue: '1',
    componentProps: {
      options: [
        { label: common('invalid'), value: '0' },
        { label: common('valid'), value: '1' },
      ],
    },
  },
];
